<template>
  <view class="container">
    <!-- 信息展示部分 -->
    <u-form class="form-content">
      <!-- 身份证号输入 -->
      <u-form-item label="身份证号" class="form-item" label-width="120">
        <u-input
          v-model="formData.idCard"
          placeholder="请输入身份证号"
          class="custom-input"
        />
      </u-form-item>
      <!-- 从业资格类型选择 -->
      <u-form-item label="从业资格类型" class="form-item" label-width="120">
        <view class="arrow-icon-groud">
          <u-input
            class="custom-input"
            v-model="formData.qualification"
            placeholder="请选择从业资格类型"
            @click="changeOpenCarColor"
          />
          <!-- 向下/向上箭头图标 -->
          <u-icon
            name="arrow-right"
            size="16"
            class="arrow-icon"
            @click="changeOpenCarColor"
          />
        </view>

        <area-picker
          up-suffix
          ref="carPicker"
          :title="title"
          titleColor="#808080"
          titleFontSize="14px"
          cancelType="icon"
          cancelColor="#999999"
          cancleFontSize="28rpx"
          confirmColor="#2877FF"
          confirmFontSize="14px"
          confirmFontWeight="500"
          itemFontSize="14px"
          @onClose="closeCarPicker"
          @onConfirm="confirmCarPicker"
          :pickerList="list"
        />
      </u-form-item>

      <!-- 道路运输证号输入 -->
      <u-form-item label="资格证初领日期" class="form-item" label-width="120">
        <up-datetime-picker
          hasInput
          :show="show"
          v-model="formData.qualificationStartDate"
          placeholder="请选择资格证初领日期"
          mode="date"
        ></up-datetime-picker>
        <!-- <u-icon
          name="arrow-right"
          size="16"
          class="arrow-icon"
          @click="changeOpenCarColor"
        /> -->
      </u-form-item>
    </u-form>

    <!-- 按钮 -->
    <view class="button-section">
      <button class="btn-query">立即查询</button>
    </view>

    <!-- 循环生成的列表 -->
    <view class="score-section">
      <view
        class="score-item"
        v-for="(item, index) in scores"
        :key="index"
        @tap="goDetails(item.id)"
      >
        <text class="score-value">记分值：{{ item.value }}</text>
        <text class="score-date">记分日期：{{ item.date }}</text>
        <u-icon
          name="arrow-right"
          size="16"
          color="#C0C3CE"
          class="arrow-right"
        ></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import { getWorkType } from "@/common/util_complete.js";
export default {
  data() {
    return {
      title: "选择从业资格类型",
      formData: {
        idCard: "",
        qualification: "",
        qualificationStartDate: "",
        plateColorPickerVisible: false,
      },
      scores: [
        { id: 1, value: 3, date: "2023-07-10" },
        { id: 2, value: 3, date: "2023-07-10" },
        { id: 3, value: 3, date: "2023-07-10" },
        { id: 4, value: 3, date: "2023-07-10" },
        { id: 5, value: 3, date: "2023-07-10" },
        { id: 6, value: 3, date: "2023-07-10" },
      ],
    };
  },
  methods: {
    goDetails(index) {
      uni.navigateTo({
        url: `/pages/hub_zsyg/trans/queryPracscoreDetails?id=${index}`,
      });
    },
    // 打开从业资格类型选择器
    changeOpenCarColor() {
      this.plateColorPickerVisible = !this.plateColorPickerVisible;
      this.$refs.carPicker._open();
    },

    // 关闭选择器
    closeCarPicker() {
      this.$refs.carPicker._close();
    },

    confirmCarPicker(checkedValue) {
      this.formData.qualification = checkedValue;
    },
  },
  onLoad(options) {
    this.list = getWorkType(this.list);
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 10px;
  height: 100vh;
  background-color: #f3f6fa;

  box-sizing: border-box;
}

/* 信息展示部分样式 */
.info-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.info-title {
  color: #666;
  font-size: 14px;
}

.info-content {
  color: #333;
  font-size: 14px;
  font-weight: bold;
}

.form-content {
  background-color: #ffffff;
  padding: 0;
  margin-bottom: 20px;
  /* 去掉 padding */
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  padding: 0 10px;
  border-bottom: 1px solid #f1f1f1;
  color: #0d1444;
  font-size: 16px;
  /* 设置下边框 */
  ::v-deep .u-border,
  .up-border {
    border: none !important;
  }
}

/* 按钮样式 */
.button-section {
  text-align: center;
  margin-bottom: 10px;
}

.btn-query {
  background-color: #2877ff;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  height: 40px;
  border: none;
}

/* 记分列表部分样式 */
.score-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 10px;
  .score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }
  .score-item:last-child {
    border-bottom: none;
  }

  .score-value {
    color: #2877ff;
    font-size: 14px;
    flex: 1;
  }

  .score-date {
    color: #79829c;
    font-size: 14px;
  }
  .arrow-right {
    margin-left: 10px;
    position: relative;
  }
}

/* 右箭头图标样式 */
u-icon {
  margin-left: 10px;
}
.arrow-icon-groud {
  position: relative;
  flex: 1;

  .arrow-icon {
    position: absolute !important;
    right: 20px;
    top: 10px;
    color: #c0c3ce;
  }
}
</style>
